<template>
    <div>      
      <div class="RunningTime" :style="css">
          <div class="envnt">
              <h2 >{{NameOfDevice.name}}</h2>
              <img src="../../assets/image/page/rotate.png" alt="" class="rotate">
          </div>
          <div class="Choice1">
            <div   v-for="(item,index) in arrayList" :key="index" @click="jump(item)" >{{item.name }}</div>
          </div>
        </div>
    </div>
</template>
<script>
export default {
        props:{
                NameOfDevice:{
                    type:Object,
                    default:{}
                },
                arrayList:{
                    type:Array,
                    default:[]
                },
                css:{
                  type:String,
                  default:''
                }
        },
        data(){
          return{}
        },
     
        methods:{
            jump(e){
                    this.$emit("jump",e)
            }
        }
}
</script>
<style  scoped>
.RunningTime {
  width: 438px;
  float: left;
  height: 58px;
  background: url("../../assets/image/page/RunningTime.png") no-repeat;
  float: left;
  font-size: 14px;
  text-align: center;
  line-height: 42px;
  font-weight: 600;
  position: relative;
  color: #fff;
  margin-left: -1px;
}
.RunningTime img {
  position: absolute;
  right: 89px;
 top: 0;
 bottom: 0;
 margin: auto;
}
.RunningTime:hover {
  cursor: pointer;
}
.RunningTime:hover .Choice1 {
  opacity: 1;
  height:auto;

}
.RunningTime h2 {
  line-height: 58px;
}
 .rotate {
  transition:all .5s;
 }
.RunningTime:hover .rotate {
  transform: rotate(180deg);
}
.Choice1 {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: 49px;
  margin: auto;
  overflow: hidden;
  background-color: #121212;
  transition:all .5s;
  opacity: 0;
  height: 0;
  border:2px solid #60f0fd;
  font-size: 18px;
}
.Choice1 div{
    height: 30px;
    line-height: 30px;
}
.Choice1 div:hover {
    background-color: #02ccbd;
}
</style>